<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交易管理 - 银行系统</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        .form-label {
            font-weight: bold;
        }
        .btn-primary:hover {
            background-color: #0056b3;
            border-color: #0056b3;
        }
        .btn-outline-secondary:hover {
            color: #6c757d;
            background-color: #f8f9fa;
            border-color: #6c757d;
        }
        .btn-success:hover {
            background-color: #28a745;
            border-color: #28a745;
        }
        .table-light th {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="main-content">
        <div class="header">
            <h4>交易管理</h4>
            <!-- 用户信息部分 -->
        </div>
        
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white">
                <h5 class="mb-0">交易查询</h5>
            </div>
            <div class="card-body">
                <form method="get" action="{{ url_for('manage_transactions') }}">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label">银行卡号</label>
                            <input type="text" name="card_id" class="form-control" 
                                   value="{{ search_params.card_id }}" placeholder="输入卡号">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label" for="customer_id">客户</label>
                            <select id="customer_id" name="customer_id" class="form-select">
                                <option value="">所有客户</option>
                                {% for customer in customers %}
                                    <option value="{{ customer[0] }}" 
                                        {% if search_params.customer_id == customer[0]|string %}selected{% endif %}>
                                        {{ customer[1] }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label" for="start_date">开始日期</label>
                            <input type="date" id="start_date" name="start_date" class="form-control" value="{{ search_params.start_date }}" title="请输入开始日期" placeholder="YYYY-MM-DD">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label" for="end_date">结束日期</label>
                            <input type="date" id="end_date" name="end_date" class="form-control" value="{{ search_params.end_date }}" title="请输入结束日期" placeholder="YYYY-MM-DD">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label" for="trade_type">交易类型</label>
                            <select id="trade_type" name="type" class="form-select">
                                <option value="all" {% if search_params.trade_type == 'all' %}selected{% endif %}>全部</option>
                                <option value="存款" {% if search_params.trade_type == '存款' %}selected{% endif %}>存款</option>
                                <option value="取款" {% if search_params.trade_type == '取款' %}selected{% endif %}>取款</option>
                                <option value="转账" {% if search_params.trade_type == '转账' %}selected{% endif %}>转账</option>
                            </select>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-12 text-end">
                            <button type="submit" class="btn btn-primary me-2">
                                <i class="bi bi-search"></i> 查询
                            </button>
                            <a href="{{ url_for('manage_transactions') }}" class="btn btn-outline-secondary me-2">
                                <i class="bi bi-arrow-counterclockwise"></i> 重置
                            </a>
                            <a href="{{ url_for('export_transactions', **search_params) }}" 
                               class="btn btn-success">
                                <i class="bi bi-download"></i> 导出CSV
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0">交易记录</h5>
                <div class="text-muted small">
                    共 {{ transactions|length }} 条记录
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>交易时间</th>
                                <th>银行卡号</th>
                                <th>客户姓名</th>
                                <th>交易类型</th>
                                <th>金额</th>
                                <th>备注</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for t in transactions %}
                                <tr>
                                    <td>{{ t.date }}</td>
                                    <td>{{ t.card_id }}</td>
                                    <td>{{ t.customer_name }}</td>
                                    <td>{{ t.type }}</td>
                                    <td class="{% if t.type == '存款' or t.type == '转账' %}text-success{% else %}text-danger{% endif %}">
                                        ¥{{ t.amount|abs|format_currency }}
                                        {% if t.type == '存款' or t.type == '转账' %}(+){% else %}(-){% endif %}
                                    </td>
                                    <td>{{ t.remark }}</td>
                                </tr>
                            {% else %}
                                <tr>
                                    <td colspan="6" class="text-center py-4">没有找到交易记录</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 引入Bootstrap JS和Chart.js -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>
